<template>
  <div class="analytics">
    <h2 class="page-title">数据分析</h2>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div class="card">
        <h3 class="chart-title">年度销售趋势</h3>
        <div class="placeholder-chart"></div>
      </div>
      
      <div class="card">
        <h3 class="chart-title">产品类别分布</h3>
        <div class="placeholder-chart"></div>
      </div>
      
      <div class="card">
        <h3 class="chart-title">区域销售热力图</h3>
        <div class="placeholder-chart"></div>
      </div>
      
      <div class="card">
        <h3 class="chart-title">客户满意度</h3>
        <div class="placeholder-chart"></div>
      </div>
    </div>
    
    <div class="card mt-6">
      <h3 class="chart-title">详细数据报表</h3>
      <div class="placeholder-table"></div>
    </div>
  </div>
</template>

<style scoped>
.analytics {
  max-width: 1920px;
  margin: 0 auto;
  padding: 1rem;
}

.placeholder-chart {
  height: 300px;
  background: #f5f7fa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7f8c8d;
  font-size: 1.1rem;
}

.placeholder-table {
  height: 400px;
  background: #f5f7fa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7f8c8d;
  font-size: 1.1rem;
}
</style>